<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>威客任务推荐 - 创意社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --secondary: #FF7D00;
            --success: #00B42A;
            --danger: #F53F3F;
            --dark: #1D2129;
            --gray: #86909C;
            --light-gray: #F2F3F5;
            --border-color: #E5E6EB;
            --shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark);
            background-color: #F7F8FA;
            line-height: 1.6;
            padding-top: 3rem;
            padding-bottom: 5rem;
        }
        
        .section-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .section-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--dark);
            position: relative;
            padding-left: 0.8rem;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            background-color: var(--primary);
            border-radius: 4px;
        }
        
        .task-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 3rem;
        }
        
        .task-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
            align-items: center;
        }
        
        .filter-chip {
            background-color: var(--light-gray);
            border: none;
            border-radius: 20px;
            padding: 0.4rem 1.2rem;
            font-size: 0.9rem;
            color: var(--dark);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-chip:hover, .filter-chip.active {
            background-color: var(--primary);
            color: white;
        }
        
        .view-toggle {
            margin-left: auto;
            display: flex;
            gap: 0.5rem;
        }
        
        .toggle-btn {
            background-color: var(--light-gray);
            border: none;
            border-radius: 4px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .toggle-btn:hover, .toggle-btn.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 通用任务卡片样式 */
        .task-card {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: var(--transition);
            margin-bottom: 1.5rem;
        }
        
        .task-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            border-color: transparent;
        }
        
        .task-author {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .task-meta {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            color: var(--gray);
            font-size: 0.85rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .task-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
        }
        
        .action-btn:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.saved {
            color: var(--secondary);
        }
        
        .task-price {
            font-weight: 600;
            color: var(--success);
            font-size: 1.1rem;
        }
        
        /* 列表式布局 */
        .list-layout .task-card {
            display: flex;
            padding: 1rem;
        }
        
        .list-layout .task-images {
            width: 140px;
            flex-shrink: 0;
            margin-right: 1.2rem;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            min-height: 100px;
            background-color: var(--light-gray);
        }
        
        .list-layout .task-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .list-layout .image-count {
            position: absolute;
            bottom: 6px;
            right: 6px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.7rem;
            padding: 0.1rem 0.4rem;
            border-radius: 4px;
        }
        
        .list-layout .task-content {
            flex-grow: 1;
        }
        
        .list-layout .task-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
            text-decoration: none;
            display: block;
        }
        
        .list-layout .task-title:hover {
            color: var(--primary);
        }
        
        .list-layout .task-desc {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .list-layout .task-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-layout .task-card {
            flex-direction: column;
        }
        
        .grid-layout .task-images {
            width: 100%;
            height: 160px;
            position: relative;
            background-color: var(--light-gray);
        }
        
        .grid-layout .task-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-layout .image-count {
            position: absolute;
            bottom: 6px;
            right: 6px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.7rem;
            padding: 0.1rem 0.4rem;
            border-radius: 4px;
        }
        
        .grid-layout .task-content {
            padding: 1rem;
        }
        
        .grid-layout .task-title {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-layout .task-title:hover {
            color: var(--primary);
        }
        
        .grid-layout .task-desc {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-layout .task-footer {
            border-top: 1px solid var(--border-color);
            padding-top: 0.8rem;
            margin-top: auto;
        }
        
        .grid-layout .task-meta {
            margin-bottom: 0.8rem;
            flex-wrap: wrap;
        }
        
        /* 大图布局 */
        .large-image-layout .task-card {
            flex-direction: column;
        }
        
        .large-image-layout .task-images {
            width: 100%;
            height: 240px;
            display: flex;
            position: relative;
            background-color: var(--light-gray);
        }
        
        .large-image-layout .task-image {
            flex: 1;
            height: 100%;
            object-fit: cover;
            border-right: 1px solid white;
        }
        
        .large-image-layout .task-image:last-child {
            border-right: none;
        }
        
        .large-image-layout .image-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.8rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
        }
        
        .large-image-layout .task-content {
            padding: 1.5rem;
        }
        
        .large-image-layout .task-title {
            font-weight: 600;
            font-size: 1.3rem;
            margin-bottom: 0.8rem;
            color: var(--dark);
            text-decoration: none;
        }
        
        .large-image-layout .task-title:hover {
            color: var(--primary);
        }
        
        .large-image-layout .task-desc {
            color: var(--gray);
            font-size: 1rem;
            margin-bottom: 1.2rem;
        }
        
        .large-image-layout .task-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        /* 无图任务样式 */
        .no-image {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--light-gray);
            color: var(--gray);
            font-size: 2rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .grid-layout {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .list-layout .task-card {
                flex-direction: column;
            }
            
            .list-layout .task-images {
                width: 100%;
                height: 180px;
                margin-right: 0;
                margin-bottom: 1rem;
            }
            
            .task-filters {
                justify-content: center;
            }
            
            .view-toggle {
                margin-left: 0;
                margin-top: 1rem;
                width: 100%;
                justify-content: center;
            }
            
            .large-image-layout .task-images {
                height: 180px;
            }
        }
        
        @media (max-width: 576px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
            
            .task-footer {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 1rem;
            }
            
            .task-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .large-image-layout .task-images {
                height: 140px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 列表式布局任务 -->
        <div class="task-section">
            <div class="section-header">
                <h2 class="section-title">最新威客任务</h2>
            </div>
            
            <div class="task-filters">
                <button class="filter-chip active">全部任务</button>
                <button class="filter-chip">设计</button>
                <button class="filter-chip">开发</button>
                <button class="filter-chip">文案</button>
                <button class="filter-chip">营销</button>
                <button class="filter-chip">视频</button>
                
                <div class="view-toggle">
                    <button class="toggle-btn active" title="列表视图" data-view="list">
                        <i class="fas fa-list"></i>
                    </button>
                    <button class="toggle-btn" title="网格视图" data-view="grid">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="toggle-btn" title="大图视图" data-view="large-image">
                        <i class="fas fa-image"></i>
                    </button>
                </div>
            </div>
            
            <div class="tasks-container list-layout">
                <!-- 任务1：单张图片 -->
                <div class="task-card">
                    <div class="task-images">
                        <img src="https://picsum.photos/seed/task1/300/200" alt="Logo设计任务示例图" class="task-image">
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">创意工作室</span>
                        </div>
                        
                        <a href="#" class="task-title">企业Logo设计，需要现代简约风格，突出科技感</a>
                        <p class="task-desc">我们是一家新成立的科技公司，需要设计一个现代简约风格的Logo，要求体现科技感和创新精神。需要提供至少3个方案供选择，最终交付源文件。</p>
                        
                        <div class="task-footer">
                            <div>
                                <span class="task-price">¥1,500</span>
                            </div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 248</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 36</span>
                                <span class="meta-item"><i class="far fa-clock"></i> 3天前</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn"><i class="far fa-heart"></i> 收藏</button>
                                <button class="action-btn"><i class="far fa-thumbs-up"></i> 点赞</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务2：多张图片 -->
                <div class="task-card">
                    <div class="task-images">
                        <img src="https://picsum.photos/seed/task2/300/200" alt="网站改版任务示例图1" class="task-image">
                        <div class="image-count">+2</div>
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">电商平台</span>
                        </div>
                        
                        <a href="#" class="task-title">电商网站首页改版设计与前端实现</a>
                        <p class="task-desc">现有电商网站需要改版，提升用户体验和转化率。需要先进行UI设计，然后进行前端实现。要求响应式设计，兼容各种设备。参考案例已上传。</p>
                        
                        <div class="task-footer">
                            <div>
                                <span class="task-price">¥8,000</span>
                            </div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 512</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 78</span>
                                <span class="meta-item"><i class="far fa-clock"></i> 1天前</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn saved"><i class="fas fa-bookmark"></i> 已收藏</button>
                                <button class="action-btn"><i class="far fa-thumbs-up"></i> 点赞</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务3：无图片 -->
                <div class="task-card">
                    <div class="task-images no-image">
                        <i class="far fa-file-alt"></i>
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">教育机构</span>
                        </div>
                        
                        <a href="#" class="task-title">教育类APP产品文案撰写，包括功能介绍和宣传语</a>
                        <p class="task-desc">我们正在开发一款K12教育类APP，需要专业文案人员撰写产品介绍、功能说明和宣传文案。要求语言生动，符合目标用户群体（学生和家长）的阅读习惯。</p>
                        
                        <div class="task-footer">
                            <div>
                                <span class="task-price">¥2,000</span>
                            </div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 186</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 24</span>
                                <span class="meta-item"><i class="far fa-clock"></i> 5小时前</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn"><i class="far fa-heart"></i> 收藏</button>
                                <button class="action-btn liked"><i class="fas fa-thumbs-up"></i> 已赞</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 网格布局任务 -->
        <div class="task-section">
            <div class="section-header">
                <h2 class="section-title">热门推荐任务</h2>
            </div>
            
            <div class="tasks-container grid-layout">
                <!-- 任务4：单张图片 -->
                <div class="task-card">
                    <div class="task-images">
                        <img src="https://picsum.photos/seed/task4/400/300" alt="短视频制作任务示例图" class="task-image">
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">美妆品牌</span>
                        </div>
                        
                        <a href="#" class="task-title">产品宣传短视频制作，15-30秒</a>
                        <p class="task-desc">需要为新款口红制作宣传短视频，时长15-30秒，突出产品特点和使用效果。</p>
                        
                        <div class="task-footer">
                            <div class="task-price">¥3,000</div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 324</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 42</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn"><i class="far fa-heart"></i> 收藏</button>
                                <button class="action-btn"><i class="far fa-thumbs-up"></i> 点赞</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务5：多张图片 -->
                <div class="task-card">
                    <div class="task-images">
                        <img src="https://picsum.photos/seed/task5/400/300" alt="包装设计任务示例图1" class="task-image">
                        <div class="image-count">+3</div>
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user5/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">食品公司</span>
                        </div>
                        
                        <a href="#" class="task-title">有机食品包装设计，系列产品</a>
                        <p class="task-desc">为有机零食系列产品设计包装，包括袋式和盒式两种，需要统一风格。</p>
                        
                        <div class="task-footer">
                            <div class="task-price">¥5,000</div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 412</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 56</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn saved"><i class="fas fa-bookmark"></i> 已收藏</button>
                                <button class="action-btn"><i class="far fa-thumbs-up"></i> 点赞</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务6：无图片 -->
                <div class="task-card">
                    <div class="task-images no-image">
                        <i class="fas fa-code"></i>
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user6/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">科技创业</span>
                        </div>
                        
                        <a href="#" class="task-title">Python爬虫开发，获取特定网站数据</a>
                        <p class="task-desc">需要开发一个Python爬虫程序，定期获取特定电商网站的产品价格和评价数据。</p>
                        
                        <div class="task-footer">
                            <div class="task-price">¥2,500</div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 278</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 31</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn"><i class="far fa-heart"></i> 收藏</button>
                                <button class="action-btn liked"><i class="fas fa-thumbs-up"></i> 已赞</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务7：单张图片 -->
                <div class="task-card">
                    <div class="task-images">
                        <img src="https://picsum.photos/seed/task7/400/300" alt="微信公众号排版任务示例图" class="task-image">
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user7/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">自媒体工作室</span>
                        </div>
                        
                        <a href="#" class="task-title">微信公众号文章排版设计，长期合作</a>
                        <p class="task-desc">需要为微信公众号文章进行专业排版，要求美观易读，符合品牌风格，长期合作。</p>
                        
                        <div class="task-footer">
                            <div class="task-price">¥150/篇</div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 365</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 48</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn"><i class="far fa-heart"></i> 收藏</button>
                                <button class="action-btn"><i class="far fa-thumbs-up"></i> 点赞</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 大图布局任务 -->
        <div class="task-section">
            <div class="section-header">
                <h2 class="section-title">精选高端任务</h2>
            </div>
            
            <div class="tasks-container large-image-layout">
                <!-- 任务8：多张图片 -->
                <div class="task-card">
                    <div class="task-images">
                        <img src="https://picsum.photos/seed/task8a/600/400" alt="品牌VI设计任务示例图1" class="task-image">
                        <img src="https://picsum.photos/seed/task8b/600/400" alt="品牌VI设计任务示例图2" class="task-image">
                        <div class="image-count">共5张</div>
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user8/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">新创品牌</span>
                        </div>
                        
                        <a href="#" class="task-title">全套品牌VI设计，包括Logo、色彩系统和应用规范</a>
                        <p class="task-desc">我们是一家即将推出的生活方式品牌，需要设计全套VI系统。包括但不限于：Logo设计、标准字、标准色、辅助图形，以及在名片、信封、包装袋、员工服装等方面的应用规范。要求设计风格简约、现代，具有国际视野，能够体现品牌的高品质定位。</p>
                        
                        <div class="task-footer">
                            <div>
                                <span class="task-price">¥30,000</span>
                            </div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 1256</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 132</span>
                                <span class="meta-item"><i class="far fa-clock"></i> 2天前</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn saved"><i class="fas fa-bookmark"></i> 已收藏</button>
                                <button class="action-btn liked"><i class="fas fa-thumbs-up"></i> 已赞 (245)</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务9：无图片 -->
                <div class="task-card">
                    <div class="task-images no-image">
                        <i class="fas fa-pen-fancy"></i>
                    </div>
                    
                    <div class="task-content">
                        <div class="task-author">
                            <img src="https://picsum.photos/seed/user9/100/100" alt="用户头像" class="author-avatar">
                            <span class="author-name">出版公司</span>
                        </div>
                        
                        <a href="#" class="task-title">科技类书籍翻译，中译英，要求专业背景</a>
                        <p class="task-desc">现有一本关于人工智能与机器学习的专业书籍需要从中文翻译成英文。要求译者具备计算机科学或相关专业背景，有科技类翻译经验，能够准确理解和翻译专业术语。全书约25万字，需要在3个月内完成。有意者请提供相关翻译样本和简历。</p>
                        
                        <div class="task-footer">
                            <div>
                                <span class="task-price">¥500/千字</span>
                            </div>
                            
                            <div class="task-meta">
                                <span class="meta-item"><i class="far fa-eye"></i> 876</span>
                                <span class="meta-item"><i class="far fa-comment"></i> 64</span>
                                <span class="meta-item"><i class="far fa-clock"></i> 4天前</span>
                            </div>
                            
                            <div class="task-actions">
                                <button class="action-btn"><i class="far fa-heart"></i> 收藏</button>
                                <button class="action-btn"><i class="far fa-thumbs-up"></i> 点赞 (108)</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视图切换功能
            const toggleButtons = document.querySelectorAll('.toggle-btn');
            const tasksContainers = document.querySelectorAll('.tasks-container');
            
            toggleButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的active类
                    toggleButtons.forEach(btn => btn.classList.remove('active'));
                    // 为当前按钮添加active类
                    this.classList.add('active');
                    
                    // 获取目标视图类型
                    const targetView = this.getAttribute('data-view');
                    
                    // 对第一个任务列表应用视图切换
                    const firstContainer = document.querySelector('.tasks-container');
                    firstContainer.className = 'tasks-container ' + targetView + '-layout';
                });
            });
            
            // 任务筛选功能
            const filterChips = document.querySelectorAll('.filter-chip');
            filterChips.forEach(chip => {
                chip.addEventListener('click', function() {
                    // 移除所有筛选按钮的active类
                    filterChips.forEach(c => c.classList.remove('active'));
                    // 为当前按钮添加active类
                    this.classList.add('active');
                    
                    // 在实际应用中，这里可以添加筛选任务的逻辑
                    const filter = this.textContent;
                    console.log('筛选：' + filter);
                });
            });
            
            // 收藏按钮交互
            const saveButtons = document.querySelectorAll('.action-btn:has(.far.fa-heart), .action-btn:has(.fas.fa-bookmark)');
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        // 变为已收藏状态
                        icon.classList.remove('far', 'fa-heart');
                        icon.classList.add('fas', 'fa-bookmark');
                        this.classList.add('saved');
                    } else {
                        // 变为未收藏状态
                        icon.classList.remove('fas', 'fa-bookmark');
                        icon.classList.add('far', 'fa-heart');
                        this.classList.remove('saved');
                    }
                });
            });
            
            // 点赞按钮交互
            const likeButtons = document.querySelectorAll('.action-btn:has(.far.fa-thumbs-up), .action-btn:has(.fas.fa-thumbs-up)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    let countText = this.childNodes[2]?.textContent?.trim() || '';
                    let count = 0;
                    
                    // 提取当前点赞数
                    if (countText) {
                        const match = countText.match(/\d+/);
                        if (match) {
                            count = parseInt(match[0]);
                        }
                    }
                    
                    if (icon.classList.contains('far')) {
                        // 变为已点赞状态
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        // 更新点赞数
                        if (count > 0) {
                            this.innerHTML = `<i class="fas fa-thumbs-up"></i> 已赞 (${count + 1})`;
                        } else {
                            this.innerHTML = `<i class="fas fa-thumbs-up"></i> 已赞`;
                        }
                    } else {
                        // 变为未点赞状态
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        // 更新点赞数
                        if (count > 1) {
                            this.innerHTML = `<i class="far fa-thumbs-up"></i> 点赞 (${count - 1})`;
                        } else {
                            this.innerHTML = `<i class="far fa-thumbs-up"></i> 点赞`;
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>
    
